<!-- Copyright 2020 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">

<!--
  Simple OOBE polymer element which is used for displaying slides in a carousel.
  It has fixed height and width which match general width and height oobe-dialog
  restrictions.

  Example (each slide must be within a oobe-slide tag):
    <oobe-carousel slide-duration="2">
      <div slot="slides">Slide 1</div>
      <div slot="slides">Slide 2</div>
      <div slot="slides">Slide 3</div>
    </oobe-carousel>

  Note: This element assumes that load_time_data is included in the enclosing
  document level.
-->

<dom-module id="oobe-carousel">
  <template>
    <style>
      :host {
        height: 100%;
        width: 100%;
      }

      #container {
        height: 100%;
        overflow: hidden;
        position: relative;
        white-space: nowrap;
        width: 100%;
      }

      #slidesContainer {
        background: white;
        height: 100%;
        position: relative;
        width: 100%;
        will-change: transform;
      }
      #slidesContainer ::slotted(*) {
        height: 100%;
        overflow-x: hidden;
        position: absolute;
        width: 100%;
      }

      #navigationContainer {
        bottom: 8px;
        display: flex;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
      }

      #dotsContainer {
        display: flex;
      }

      ::slotted(.animated) {
        /* cubic-bezier(0.6, 0.0, 0.0, 1.0) makes animation of transition
           similar to basic slide rotation. */
        transition: transform 500ms cubic-bezier(0.6, 0, 0, 1.0);
      }

      ::slotted(.backward) {
        transform: var(--oobe-backward-slide-animation);
      }

      ::slotted(.forward) {
        transform: var(--oobe-forward-slide-animation);
      }

      ::slotted(.hide-slide) {
        animation: 500ms ease 0s normal forwards 1 slide-fadeout;
      }

      @keyframes slide-fadeout {
          0% { opacity: 1.0; }
          60% { opacity: 1.0; } /* Starts animation at 0.6 * 0.5s = 0.3s. */
          100% { opacity: 0; }
      }

      .buttons {
        height: 20px;
        margin-inline-end: 0;
        margin-inline-start: 0;
        width: 20px;
      }

      .slider-dot {
        background: var(--google-grey-200);
        border-radius: 5px;
        cursor: pointer;
        height: 10px;
        margin: 5px;
        transition: background 200ms;
        transition-delay: 100ms;
        width: 10px;
      }
      .slider-dot[active] {
        background: var(--google-blue-600);
      }
      .slider-dot:focus {
        box-shadow: 0 0 7px 1px rgba(var(--google-blue-600-rgb), .75);
        outline: none;
      }

      .arrow-button {
        --cr-icon-button-fill-color: var(--google-grey-400);
      }
    </style>
    <div id="container">
      <div id="slidesContainer">
        <slot id="slot" name="slides"></slot>
      </div>
      <div id="navigationContainer">
        <cr-icon-button id="left" class="buttons" iron-icon="cr:chevron-left"
            class="arrow-button" on-click="movePrev"></cr-icon-button>
        <div id="dotsContainer" role="radiogroup">
          <template is="dom-repeat" items="[[dots]]">
            <span class="slider-dot" tabindex="0" on-keypress="onKeypress_"
                on-click="onClick_" active$="[[isActive_(index, slideIndex)]]"
                aria-label="[[getDotLabel_(index, slideIndex)]]" aria-live="off"
                aria-checked="[[isActive_(index, slideIndex)]]"
                role="radio"></span>
          </template>
        </div>
        <cr-icon-button id="right" class="buttons" iron-icon="cr:chevron-right"
            class="arrow-button" on-click="moveNext"></cr-icon-button>
      </div>
    </div>
  </template>
  <script src="oobe_carousel.js"></script>
</dom-module>
